import React, { Component } from 'react';
import {
    Progress,
    Icon,
    Button,
    message,
    Input,
    Modal,
    Row,
    Col,
    Tag,
} from 'antd';
import { getUrlParams } from 'yl-util';
import { api } from '../../constants';
import { fetch } from '../../utils';
import './style.scss';

let openId = '';
const urlParams = getUrlParams(window.location.href.split('?')[1]);
if (urlParams && urlParams.id) {
    openId = window.btoa(window.btoa(`${urlParams.id}yqcmxssLcJL1l8jnlC`));
}
// const openId = 'TWpJME9USXdPSGx4WTIxNGMzTk1ZMHBNTVd3NGFtNXNRdz09';

export default class Index extends Component {
    state = {
        userInfo: {},
        stealViewData: {},
        stealMsg: '',
        rewardData: {},
        rewardMsg: '',
        flowerMsg: '',
        flowerErrorMsg: '',
        taskList: [],
        taskWeekList: [],
        taskAchieveList: [],
        blessList: [],
        flowerInfo: {},
        videoNum: 0,
        stealDisabled: false, // 禁止偷花标记
        rewardDisabled: false, // 禁止抽奖标记
        flowerDisabled: false, // 禁止挂花神标记
        offlineFlowerDisabled: true, // 领取离线花
        upgradeDisabled: true, // 可升级标记
        isCrystal: false, // 是否是刘亦菲公会标记
    };
    hart_settle = 10; // 轮询秒数
    interval = null; // 花神轮询
    intervalWs = null; // websocket轮询
    ws = new WebSocket('wss://wsidolcome.yhxpz.com/ws');

    componentDidMount() {
        this.init();

        // ws
        this.ws.onopen = this.handleOpen;
        this.ws.onmessage = this.handleMessage;
        this.ws.onclose = this.handleClose;
    }

    componentWillUnmount() {
        if (this.interval) {
            clearInterval(this.interval);
        }
        if (this.intervalWs) {
            clearInterval(this.intervalWs);
        }
    }

    // 花神信息
    async getFlowerInfo() {
        const params = {
            openId,
        };
        let response = await fetch(`${api.flowerInfo}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            if (response.data) {
                response = response.data || {};
                // 是否离线
                const offlineFlowerDisabled = !(
                    response.user[0].offline_flower > 0
                );
                const upgradeDisabled = !(
                    response.user[0].power > response.user[0].need_power
                );

                this.setState({
                    flowerInfo: response,
                    flowerErrorMsg: '',
                    offlineFlowerDisabled,
                    upgradeDisabled,
                });
                document.title = '偶像来了刘亦菲偷花专用脚本';
                this.hart_settle = response.hart_settle || 10;
            }
        } else {
            document.title = '接口返回异常';
            this.setState({
                flowerErrorMsg: (
                    <span className="error">
                        {response.msg || '接口返回异常'} 五分钟后重试...
                    </span>
                ),
            });
        }
    }

    // 祝福信息
    async getBlessList() {
        const params = {
            openId,
        };
        const response = await fetch(`${api.blessList}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000' && response.data) {
            this.setState({ blessList: response.data.data || [] });
        }
    }

    // 领取补偿
    async getGift() {
        const params = {
            openId,
        };
        const response = await fetch(`${api.getGift}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            message.success(response.data.msg || '');
        } else {
            message.error(response.message || '领取失败');
        }
    }

    // 获取用户信息
    async getUserInfo() {
        const params = {
            openId,
        };
        const response = await fetch(`${api.userInfo}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000' && response.data) {
            if (response.data.user.mid === 78 || response.data.user.mid === 0) {
                this.setState({ isCrystal: true });
            }
            this.setState({ userInfo: response.data.user });
        }
    }

    // 获取任务列表
    async getTaskList() {
        const params = {
            openId,
        };
        const response = await fetch(`${api.getTaskList}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            const data = response.data || {};
            let flag = false;
            const taskList = (data.taskExtVoList || []).map((item, index) => {
                if (item.status === 1) {
                    flag = true;
                    setTimeout(() => {
                        this.getReward({ type: item.type });
                    }, 2000 * index);
                }
                return item;
            });

            // 领取任务奖励1秒之后重新刷新页面
            if (flag) {
                setTimeout(() => {
                    this.getTaskList();
                }, 1000 * (data.taskExtVoList || []).length);
            }
            this.setState({ taskList });
        }
    }

    // 获取每周任务列表
    async getTaskWeekList() {
        const params = {
            openId,
        };
        const response = await fetch(`${api.getTaskWeekList}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            const data = response.data || [];
            const taskWeekList = data.map(item => {
                if (item.status === 1) {
                    this.getRewardWeek({ type: item.type });
                }
                return item;
            });
            this.setState({ taskWeekList });
        }
    }

    // 获取成就任务列表
    async getTaskAchieveList() {
        const params = {
            openId,
        };
        const response = await fetch(`${api.getTaskAchieveList}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            const taskAchieveList = response.data || [];
            this.setState({ taskAchieveList });
        }
    }

    // 领取任务
    async getReward(payload = {}) {
        const params = {
            openId,
            ...payload,
        };
        const response = await fetch(`${api.getReward}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            message.success(
                `每日任务领取成功 ${response.data ? response.data.msg : ''}`,
            );
        } else {
            message.error(response.message || '每日任务领取失败');
        }
    }

    // 领取每周任务
    async getRewardWeek(payload = {}) {
        const params = {
            openId,
            ...payload,
        };
        const response = await fetch(`${api.getWeekReward}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            message.success(`每周任务领取成功 ${response.data.msg}`);
        } else {
            message.error(response.message);
        }
    }

    // 领取成就任务
    async getRewardAchieve(payload = {}) {
        const params = {
            openId,
            ...payload,
        };
        const response = await fetch(`${api.getAchieveReward}`, {
            method: 'POST',
            body: params,
        });
        this.getTaskAchieveList();
        if (response.msgCode === 'S0000') {
            message.success(`成就任务领取成功 ${response.data.msg}`);
        } else {
            message.error(response.message);
        }
    }

    init = () => {
        this.getTaskList(); // 任务列表
        this.getTaskWeekList(); // 每周任务列表
        this.getTaskAchieveList(); // 成就任务列表
        // 花神详细信息
        this.getFlowerInfo().then(() => {
            this.genflower(); // 轮询花神
        });
        this.getBlessList(); // 获取祝福好友列表
        this.getUserInfo(); // 获取用户信息
        this.stealFlower(); // 偷花
        this.rewardView(); // 抽奖

        // 第二天刷新页面
        const restMs =
            new Date().setHours(0, 0, 0, 0) +
            24 * 60 * 60 * 1000 +
            1000 -
            new Date().getTime();
        setTimeout(() => {
            this.init();
        }, restMs);
    };

    // 暂停恢复偷花
    toggleSteal = () => {
        const { stealDisabled } = this.state;
        if (!stealDisabled) {
            this.setState({
                stealDisabled: true,
                stealMsg: <span>偷花功能已暂停</span>,
            });
        } else {
            this.setState({ stealDisabled: false }, () => {
                this.stealFlower();
            });
        }
    };

    // 暂停恢复抽奖
    toggleReward = () => {
        const { rewardDisabled } = this.state;
        if (!rewardDisabled) {
            this.setState({
                rewardDisabled: true,
                rewardMsg: <span>抽奖功能已暂停</span>,
            });
        } else {
            this.setState({ rewardDisabled: false }, () => {
                this.rewardView();
            });
        }
    };

    // 暂停恢复花神
    toggleFlower = () => {
        const { flowerDisabled } = this.state;
        if (!flowerDisabled) {
            if (this.interval) {
                clearInterval(this.interval);
            }
            this.setState({
                flowerDisabled: true,
                flowerMsg: <span>挂花神功能已暂停</span>,
            });
        } else {
            this.setState({ flowerDisabled: false }, () => {
                this.genflower();
            });
        }
    };

    sendFlowers = number => {
        const that = this;
        Modal.confirm({
            title: `确定送${number}朵花给茜茜?`,
            okText: '确定',
            cancelText: '取消',
            onOk() {
                const params = {
                    openId,
                    mid: 78,
                    count: number,
                };
                fetch(`${api.sendflower}`, {
                    method: 'POST',
                    body: params,
                }).then(response => {
                    message.success(response.message || '');
                    if (response.msgCode === 'S0002') {
                        that.getUserInfo();
                    }
                });
            },
        });
    };

    changeFlowers = number => {
        const that = this;
        Modal.confirm({
            title: `确定兑换${number}朵鲜花?`,
            okText: '确定',
            cancelText: '取消',
            onOk() {
                const params = {
                    openId,
                    changeNum: number,
                };
                fetch(`${api.changeflower}`, {
                    method: 'POST',
                    body: params,
                }).then(response => {
                    if (response.msgCode === 'S0000') {
                        message.success(response.data.msg);
                        that.getUserInfo();
                    } else {
                        message.error(response.message);
                    }
                });
            },
        });
    };

    seeVideo = () => {
        for (let i = 0; i < 5; i += 1) {
            setTimeout(() => {
                this.viewadv(i + 1);
            }, 5000 * i);
        }
    };

    // 抽奖预览
    rewardView = async () => {
        const { rewardDisabled } = this.state;
        if (rewardDisabled) {
            return;
        }
        const params = {
            openId,
        };
        fetch(`${api.settleReward}`, {
            method: 'POST',
            body: params,
        });
        let response = await fetch(`${api.indexGuild}`, {
            method: 'POST',
            body: params,
        });
        response = response.data || {};
        this.setState({ rewardData: response || {} });
        if (response.guild) {
            if (response.today_times < 20) {
                const percent = parseInt((response.today_times / 20) * 100, 10);
                this.setState({
                    rewardMsg: (
                        <span>
                            <Progress
                                percent={percent}
                                style={{ width: 150 }}
                                status="active"
                            />
                            抽奖中...
                        </span>
                    ),
                });
                setTimeout(() => {
                    this.rewardView();
                }, 120000);
            } else {
                this.setState({
                    rewardMsg: (
                        <span>
                            <Progress percent={100} style={{ width: 150 }} />
                            抽奖次数已满
                        </span>
                    ),
                });
            }
            if (response.rewards_times > 0 && response.today_times < 20) {
                this.reward();
            }
        } else {
            this.setState({
                rewardMsg: (
                    <span className="error">
                        {response.msg || '接口返回异常'} 正在重试中...
                    </span>
                ),
            });
            setTimeout(() => {
                this.rewardView();
            }, 10000);
        }
    };

    // 抽奖
    reward = async () => {
        const params = {
            openId,
        };
        fetch(`${api.startReward}`, {
            method: 'POST',
            body: params,
        });
    };

    // 送花
    sendflower = async () => {
        const params = {
            openId,
            mid: 78,
            count: 1,
        };
        let count = 1;
        fetch(`${api.sendflower}`, {
            method: 'POST',
            body: params,
        }).then(response => {
            if (response.msgCode === 'S0002') {
                message.success(`${response.message}第${count}次`);
            } else {
                message.error(response.msg || '接口返回异常');
            }
        });
        const sInterval = setInterval(() => {
            if (count > 4) {
                clearInterval(sInterval);
                return;
            }
            count += 1;
            fetch(`${api.sendflower}`, {
                method: 'POST',
                body: params,
            }).then(response => {
                if (response.msgCode === 'S0002') {
                    message.success(`${response.message}第${count}次`);
                } else {
                    message.error(response.msg || '接口返回异常');
                }
            });
        }, 5000);
    };

    // 花神
    genflower = () => {
        const params = {
            openId,
        };
        this.setState({
            flowerMsg: (
                <span>
                    模拟花神在线中
                    <Icon type="loading" />
                </span>
            ),
        });
        // 轮询花神
        this.interval = setInterval(() => {
            fetch(`${api.genflower}`, {
                method: 'POST',
                body: params,
            });
        }, 1000 * this.hart_settle);

        // 判断接口是否异常
        setInterval(() => {
            this.getFlowerInfo();
        }, 300000);
    };

    // 偷花 预览
    stealFlower = async () => {
        const { stealDisabled } = this.state;
        if (stealDisabled) {
            this.setState({ stealMsg: <span>偷花功能已暂停</span> });
            return;
        }
        const params = {
            openId,
        };
        let response = await fetch(`${api.stealView}`, {
            method: 'POST',
            body: params,
        });
        response = response.data || {};
        this.setState({ stealViewData: response || {} });
        if (response.guild) {
            if (response.today_steal_count < response.steal_max_number) {
                const percent = parseInt(
                    (response.today_steal_count / response.steal_max_number) *
                        100,
                    10,
                );
                this.setState({
                    stealMsg: (
                        <span>
                            <Progress
                                percent={percent}
                                style={{ width: 150 }}
                                status="active"
                            />
                            偷花中...
                        </span>
                    ),
                });
                let intervalMs = 121000;
                response.guild.forEach(({ id, end_time }, index) => {
                    if (end_time) {
                        intervalMs = (end_time + 2) * 1000;
                    } else {
                        setTimeout(() => {
                            this.steal({ mid: id });
                        }, index * 2000);
                    }
                });
                setTimeout(() => {
                    this.stealFlower();
                }, intervalMs);
            } else {
                this.setState({
                    stealMsg: (
                        <span>
                            <Progress percent={100} style={{ width: 150 }} />
                            偷花次数已满
                        </span>
                    ),
                });
            }
        } else {
            this.setState({
                stealMsg: (
                    <span className="error">
                        {response.msg || '接口返回异常'} 正在重试中...
                    </span>
                ),
            });
            setTimeout(() => {
                this.stealFlower();
            }, 10000);
        }
    };

    // 偷花
    steal = async payload => {
        const params = {
            openId,
            ...payload,
        };
        await fetch(`${api.steal}`, {
            method: 'POST',
            body: params,
        });
        // this.setState({ stealViewData: response || {} });
        // if (response.guild && response.today_steal_count < response.steal_max_number) {
        //   response.guild.forEach(item => {
        //     this.steal();
        //   });
        // }
    };

    // 签到
    singIn = async () => {
        const params = {
            openId,
        };
        const response = await fetch(`${api.flowerSign}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            message.success(response.data);
        } else {
            message.error(response.message || '接口返回异常');
        }
    };

    // 祝福好友
    blessFriend = async id => {
        const params = {
            openId,
            shareOpenid: window.btoa(window.btoa(`${id}yqcmxssLcJL1l8jnlC`)),
        };
        const response = await fetch(`${api.blessFriends}`, {
            method: 'POST',
            body: params,
            noVersion: true,
        });
        if (response.msgCode === 'S0000') {
            message.success(`${response.data}, ${id}`);
        } else {
            message.error(response.message || '接口返回异常');
        }
    };

    // 祝福好友
    blessFriends = async value => {
        if (!value) {
            message.error('请输入要祝福好友的ID');
        }

        const valueList = value
            .replace(/\s/g, '')
            .replace(/(,|，)/g, ',')
            .split(',');
        valueList.forEach((v, i) => {
            setTimeout(() => {
                this.blessFriend(v);
            }, 3000 * i);
        });
    };

    // 花神加速
    accelerate = async () => {
        const params = {
            openId,
        };
        const response = await fetch(`${api.accelerate}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0004') {
            message.success(response.message || '加速成功');
        } else {
            message.error(response.message || '接口返回异常');
        }
    };

    // 看视频
    viewadv = async number => {
        const params = {
            openId,
            type: 1,
        };
        const response = await fetch(`${api.viewadv}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            message.success(
                `${response.data.msg || '提交成功'}, 第${number}次`,
            );
            if (number === 5) {
                this.getTaskList();
            }
        } else {
            message.error(response.message || '接口返回异常');
        }
    };

    // 领取离线花
    receiveOfflineFlower = async () => {
        const params = {
            openId,
        };
        const response = await fetch(`${api.getofflineflower}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'S0000') {
            message.success(`${response.data}`);
            this.getFlowerInfo();
        } else {
            message.error(response.message || '接口返回异常');
        }
    };

    // 升级花神等级
    upgrade = async () => {
        const params = {
            openId,
        };
        const response = await fetch(`${api.unlockgod}`, {
            method: 'POST',
            body: params,
        });
        if (response.msgCode === 'msgCode') {
            message.success(`${response.message}`);
            this.getFlowerInfo();
        } else {
            message.error(response.message || '接口返回异常');
        }
    };

    // 花神轮询相关
    handleClose = () => {
        console.log('close: ');
        // this.setState({ closeMsg: '连接已断开' });
        // this.setState({ flowerMsg: <span>连接已断开，10s后尝试再次连接</span> });
        console.log('连接已断开');
        if (this.intervalWs) {
            clearInterval(this.intervalWs);
        }
        setTimeout(() => {
            this.ws = new WebSocket('wss://wsidolcome.yhxpz.com/ws');
            this.ws.onopen = this.handleOpen;
            this.ws.onmessage = this.handleMessage;
            this.ws.onclose = this.handleClose;
        }, 10000);
    };

    // 处理 socket 信息
    handleMessage = e => {
        try {
            const { type } = JSON.parse(e.data);
            switch (type) {
                case 'bind':
                    this.socketSend(5, { mid: 'god78' });
                    break;
                case 'flowergod':
                    break;
                default:
            }
            // console.log('e.data.type', type);
        } catch (err) {
            console.log('err: ', err);
        }
    };

    handleOpen = () => {
        // 绑定id
        this.socketSend(1, {
            senderId: openId,
        });
        const that = this;
        // this.setState({ flowerMsg: <span>模拟花神在线中<Icon type="loading" /></span> });
        this.intervalWs = setInterval(() => {
            that.socketSend(4);
        }, 8000);
    };

    // login = () => {
    //   const params = {
    //     action: 13,
    //   };
    //   this.ws.send(JSON.stringify(params));
    // }

    socketSend = (action, chatMsg, extend, fandoms) => {
        const params = {
            action,
            ...(chatMsg ? { chatMsg } : {}),
            ...(extend ? { extend } : {}),
            ...(fandoms ? { fandoms } : {}),
        };
        if (this.ws && this.ws.readyState === 1) {
            this.ws.send(JSON.stringify(params));
        }
    };

    render() {
        const {
            userInfo,
            stealViewData,
            rewardData,
            rewardMsg,
            stealMsg,
            flowerMsg,
            taskList,
            blessList,
            flowerInfo,
            flowerErrorMsg,
            stealDisabled,
            rewardDisabled,
            flowerDisabled,
            offlineFlowerDisabled,
            upgradeDisabled,
            isCrystal,
            taskWeekList,
            taskAchieveList,
        } = this.state;
        // console.log('flowerInfo: ', flowerInfo);
        // if (!isCrystal) {
        //   return (
        //     <div style={{ width: '50%', margin: 'auto' }}>
        //       <img style={{ width: '100%' }} src="https://static.aistarfish.com/spectre/global/img/20190722162357.c260f7ably1g50szcsfr9j22ww42uhdu.jpg" alt="" />
        //     </div>
        //   );
        // }
        // let sendFlowerDisable = false;
        let signDisabled = true;
        // let videoDisabled = true;
        // if (taskList.length) {
        //   // sendFlowerDisable = taskList.filter((item) => (item.name === '送花5次'))[0].status !== 0;
        //   videoDisabled = taskList.filter((item) => (item.name === '观看视频广告'))[0].status !== 0;
        // }
        if (flowerInfo.sign) {
            flowerInfo.sign.forEach(day => {
                if (day.status === 1) {
                    signDisabled = false;
                }
            });
        }
        // console.log('flowerInfo: ', flowerInfo);
        return (
            <div className="index">
                <br />
                <div className="p">
                    个人鲜花：{userInfo.flower || 0}
                    &nbsp;&nbsp;&nbsp;&nbsp;喇叭：{userInfo.speaker || 0}{' '}
                    &nbsp;&nbsp;&nbsp;&nbsp;贡献：{userInfo.reduceFlower || 0}{' '}
                    &nbsp;&nbsp;&nbsp;&nbsp;离线花数量：
                    {flowerInfo.user ? flowerInfo.user[0].offline_flower : 0}
                </div>
                <div className="p">
                    <Button disabled={signDisabled} onClick={this.singIn}>
                        花神签到
                    </Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button
                        disabled={flowerInfo.accelerate_num !== 0}
                        onClick={this.accelerate}
                    >
                        花神加速
                    </Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    {/* <Button disabled={sendFlowerDisable} type="primary" onClick={this.sendflower}>送花5次</Button>
          &nbsp;&nbsp;&nbsp;&nbsp; */}
                    {/* <Button disabled={videoDisabled} onClick={this.seeVideo}>看视频5次</Button>
          &nbsp;&nbsp;&nbsp;&nbsp; */}
                    <Button
                        disabled={offlineFlowerDisabled}
                        onClick={this.receiveOfflineFlower.bind(this)}
                    >
                        领取离线花
                    </Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button onClick={this.getGift.bind(this)}>领取补偿</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    {/* <Button onClick={this.badge}>佩带绝世盗圣</Button> */}
                </div>
                <div className="p">
                    祝福好友：
                    <Input.Search
                        className="bless-search"
                        placeholder="输入要祝福好友的ID,多个用,隔开如12345,23456,34567"
                        enterButton="祝福"
                        onSearch={this.blessFriends.bind(this)}
                    />
                </div>
                {flowerInfo.accelerate_num === 0 && (
                    <div className="p">
                        好友祝福列表：
                        {blessList.map(({ nickname, head_img }) =>
                            head_img ? (
                                <div className="inline-block">
                                    <div>
                                        <img
                                            src={head_img}
                                            className="index-head-img"
                                            alt=""
                                        />
                                    </div>
                                    {nickname}
                                </div>
                            ) : null,
                        )}
                    </div>
                )}
                <div className="p border-bottom">
                    <span className="steal-width">
                        当前等级{' '}
                        {flowerInfo.user && flowerInfo.user[0]
                            ? flowerInfo.user[0].god_level
                            : '1'}
                        级{' '}
                        {flowerInfo.user && flowerInfo.user[0]
                            ? flowerInfo.user[0].power
                            : 0}
                        /
                        {flowerInfo.user && flowerInfo.user[0]
                            ? flowerInfo.user[0].need_power
                            : 0}
                    </span>
                    <Button
                        disabled={upgradeDisabled}
                        type="primary"
                        size="small"
                        onClick={this.upgrade.bind(this)}
                    >
                        升级
                    </Button>
                </div>
                <div className="p border-bottom">
                    <span className="steal-width">
                        <span className="message">{flowerMsg}</span>
                    </span>
                    <Button
                        type="primary"
                        size="small"
                        onClick={this.toggleFlower}
                    >
                        {!flowerDisabled ? '暂停' : '恢复'}
                    </Button>
                </div>
                <div className="p">
                    <span className="message">{flowerErrorMsg}</span>
                </div>
                <div className="p border-bottom">
                    <span className="steal-width">
                        今日已偷次数 {stealViewData.today_steal_count || 0}/
                        {stealViewData.steal_max_number || 0}{' '}
                        <span className="message">{stealMsg}</span>
                    </span>
                    <Button
                        type="primary"
                        size="small"
                        onClick={this.toggleSteal}
                    >
                        {!stealDisabled ? '暂停' : '恢复'}
                    </Button>
                </div>
                <div className="p">
                    <span className="steal-width">
                        今日抽奖次数 {rewardData.today_times || 0}/{20 || 0}{' '}
                        <span className="message">{rewardMsg}</span>
                    </span>
                    <Button
                        type="primary"
                        size="small"
                        onClick={this.toggleReward}
                    >
                        {!rewardDisabled ? '暂停' : '恢复'}
                    </Button>
                </div>
                {/* <div className="p">
          送花：
          <Input.Search
            type="number"
            className="bless-search"
            placeholder="输入要送的数量"
            enterButton="送花"
            onSearch={this.sendFlowers}
          />
        </div> */}
                <div className="p">
                    兑换鲜花：
                    <Input.Search
                        type="number"
                        className="bless-search"
                        placeholder="输入要兑换的鲜花数量"
                        enterButton="兑换鲜花"
                        onSearch={this.changeFlowers}
                    />
                </div>
                <Row>
                    <Col span={8}>
                        <p>
                            <strong>每日任务列表：</strong>
                        </p>
                        {taskList.map(({ status, name, left, right }, i) => (
                            <div className="p" key={i}>
                                {name}:{' '}
                                {status === 0 ? (
                                    '未完成'
                                ) : status === 1 ? (
                                    '未领取'
                                ) : (
                                    <Tag color="green">已完成</Tag>
                                )}
                                {left}/{right}
                            </div> // eslint-disable-line
                        ))}
                    </Col>
                    <Col span={8}>
                        <p>
                            <strong>每周任务列表：</strong>
                        </p>
                        {taskWeekList.map(({ status, name }, i) => (
                            <div className="p" key={i}>
                                {name}:{' '}
                                {status === 0 ? (
                                    '未完成'
                                ) : status === 1 ? (
                                    '未领取'
                                ) : (
                                    <Tag color="green">已完成</Tag>
                                )}
                            </div> // eslint-disable-line
                        ))}
                    </Col>
                    <Col span={8}>
                        <p>
                            <strong>成就任务列表：</strong>
                        </p>
                        {taskAchieveList.map(({ status, name, type }, i) => (
                            <div className="p" key={i}>
                                {name}:{' '}
                                {status === 0 ? (
                                    '未完成'
                                ) : status === 1 ? (
                                    <Button
                                        type="primary"
                                        size="small"
                                        onClick={this.getRewardAchieve.bind(
                                            this,
                                            { type },
                                        )}
                                    >
                                        领取奖励
                                    </Button>
                                ) : (
                                    '已完成'
                                )}
                            </div> // eslint-disable-line
                        ))}
                    </Col>
                </Row>
            </div>
        );
    }
}
